<template>
  <div>
    <div id="more">
      <van-nav-bar
        title="养宠秘籍"
        :border="false"
        left-arrow
        @click-left="$router.push('/home')" />
      <div class="mj" v-for="item in skill" :key="item.psid">
        <router-link :to="`/content/${item.psid}`">
          <div class="txt">
            <img class="logo" src="@/assets/05-小猫.png" alt="" /><span>{{
              item.title
            }}</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getSkills } from '@/api/ycmj'
export default {
  data() {
    return {
      //定义数组保存养宠秘籍
      skill: [],
      item: [],
    }
  },

  methods: {
    //获取所有养宠秘籍
    async getSkill() {
      const data = await getSkills()
      this.skill = data.data.message
      console.log(data)
    },
  },
  mounted() {
    this.getSkill()
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.logo {
  padding: 0 15px 0 0;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}
#more {
  position: relative;
  z-index: 9;
  height: 100vh;
  background-color: #fff;
  overflow-y: auto;
}
.txt {
  padding: 10px;
  border-bottom: 2px dashed #eee;
}
span {
  //width: 200px;
  //height: 20px;
  //line-height: 20px;
  background-color: rgb(243, 248, 252);
  color: rgba(0, 0, 0, 0.441);
  border-radius: 5px;
  font-size: 18px;
}
</style>
